<template>
  <a-card :bordered="false" class="card-area">
    <div :class="advanced ? 'search' : null">
      <!-- 搜索区域 -->
      <a-form layout="horizontal">
        <div :class="advanced ? null: 'fold'">
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="商品SKU"
                :labelCol="{span: 5}"
                :wrapperCol="{span: 18, offset: 1}">
                <a-input v-model="queryParams.sku" @keyup.enter="search" placeholder="搜索商品SKU"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="创建时间"
                :labelCol="{span: 5}"
                :wrapperCol="{span: 18, offset: 1}" style="display: none;">
                <range-date @change="handleDateChange" ref="createTime"></range-date>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
        <span style="float: right; margin-top: 3px;">
          <a-button type="primary" @click="search">查询</a-button>
          <a-button style="margin-left: 8px" @click="reset">重置</a-button>
        </span>
      </a-form>
    </div>
    <!-- 表格区域 -->
    <a-table ref="TableInfo"
             :columns="columns"
             :dataSource="dataSource"
             :pagination="pagination"
             :loading="loading"
             :defaultExpandAllRows="true"
             :scroll="{ x: 900 }"
             :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
             @change="handleTableChange">
      <template slot="imageUrl" slot-scope="text, record">
        <img :src="record.imageUrl" width="50" height="50">
      </template>
      <template slot="operation" slot-scope="text, record">
        <a-icon v-if="record.children != null" type="setting" theme="twoTone" twoToneColor="#4a9ff5"
                v-hasPermission="'maa:update'" @click="edit(record)" title="修改"></a-icon>
        <a-badge v-if="record.children != null" v-hasNoPermission="'maa:update'" status="warning" text="无权限"></a-badge>
      </template>
    </a-table>
  </a-card>
</template>

<script>
import RangeDate from '@/components/datetime/RangeDate'
import MaaAdd from './MaaAdds'
export default {
  name: 'Maa',
  components: {MaaAdd, RangeDate},
  data () {
    return {
      advanced: false,
      dataSource: [],
      selectedRowKeys: [],
      queryParams: {},
      sortedInfo: null,
      filteredInfo: null,
      paginationInfo: null,
      pagination: {
        pageSizeOptions: ['10', '20', '30', '40', '100'],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      },
      loading: false,
      maaAddVisiable: false,
      fileListF: [],
      fileListVideo: [],
      dataSourceMabChild: []
    }
  },
  computed: {
    columns () {
      let {sortedInfo, filteredInfo} = this
      sortedInfo = sortedInfo || {}
      filteredInfo = filteredInfo || {}
      return [
        {
          title: '图片',
          dataIndex: 'imageUrl',
          scopedSlots: {customRender: 'imageUrl'}
        }, {
          title: 'SKU',
          dataIndex: 'sku'
        }, {
          title: '供应商型号',
          dataIndex: 'supplier'
        }, {
          title: '价格',
          dataIndex: 'price'
        }, {
          title: '商品状态',
          dataIndex: 'status',
          key: 'status',
          customRender: (text, row, index) => {
            switch (text) {
              case 'Y':
                return '上架'
              case 'N':
                return '下架'
              default:
                return text
            }
          },
          filters: [{
            text: '上架',
            value: 'Y'
          }, {
            text: '下架',
            value: 'N'
          }],
          filteredValue: filteredInfo.status || null,
          onFilter: (value, record) => record.status.includes(value)
        }, {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: {customRender: 'operation'}
        }]
    }
  },
  methods: {
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    // 修改
    edit (record) {
      console.log(record)
      let maa00 = record.id
      console.log(maa00)
      this.$router.push({path: `/goods/maaEdits`, query: {id: record.id, maa01: record.sku}})
    },
    // 创建时间
    handleDateChange (value) {
      console.log(value)
      if (value) {
        this.queryParams.createTimeFrom = value[0]
        this.queryParams.createTimeTo = value[1]
      }
    },
    // 查询
    search () {
      let {sortedInfo} = this
      let sortField, sortOrder
      // 获取当前列的排序和列的过滤规则
      if (sortedInfo) {
        sortField = sortedInfo.field
        sortOrder = sortedInfo.order
        console.log(sortField)
      }
      this.fetch({
        sortField: sortField,
        sortOrder: sortOrder,
        ...this.queryParams
      })
    },
    reset () {
      // 取消选中
      this.selectedRowKeys = []
      // 重置分页
      this.$refs.TableInfo.pagination.current = this.pagination.defaultCurrent
      if (this.paginationInfo) {
        this.paginationInfo.current = this.pagination.defaultCurrent
        this.paginationInfo.pageSize = this.pagination.defaultPageSize
      }
      // 重置列排序规则
      this.sortedInfo = null
      this.filteredInfo = null
      // 重置查询参数
      this.queryParams = {}
      // 清空时间选择
      this.$refs.createTime.reset()
      this.fetch()
    },
    handleTableChange (pagination, filters, sorter) {
      console.log(sorter)
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      this.paginationInfo = pagination
      this.filteredInfo = filters
      this.sortedInfo = sorter
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...this.queryParams,
        ...filters
      })
    },
    // 请求商品新增的数据
    fetch (params = {}) {
      // 显示loading
      this.loading = true
      if (this.paginationInfo) {
        // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
        this.$refs.TableInfo.pagination.current = this.paginationInfo.current
        this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize
        params.pageSize = this.paginationInfo.pageSize
        console.log(params.pageSize)
        // 下一页
        params.pageNum = this.paginationInfo.current
        console.log(params.pageNum)
      } else {
        // 如果分页信息为空，则设置为默认值
        params.pageSize = this.pagination.defaultPageSize
        params.pageNum = this.pagination.defaultCurrent
      }
      this.$api.goods.getMaaList({
        ...params
      }).then((r) => {
        console.log(r)
        let data = r.data.data
        this.loading = false
        if (data === null) {
          this.dataSource = []
        } else {
          this.dataSource = data.records
          const pagination = { ...this.pagination }
          console.log(pagination)
          pagination.total = data.total
          this.pagination = pagination
        }
      })
    }
  },
  mounted () {
    this.fetch()
  }
}
</script>

<style lang="less" scoped>
  @import "../../../../static/less/Common";
</style>
